<template>
  <div class="login-container">
    <div class="login-form-wrap">
      <div class="login-head">
        <div class="logo-img"></div>
      </div>
      <div class="login-desc">💪 保持初心，持续向前，积极向上，努力进取。</div>
      <div>
        <el-form
          class="login-form"
          ref="loginForm"
          :rules="formRules"
          :model="user"
        >
          <el-form-item prop="username">
            <el-input
              v-model="user.username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-milk-tea"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="user.password"
              show-password
              placeholder="请输入密码"
              prefix-icon="el-icon-dish"
              @keyup.enter.native="onLogin"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="promot">
              😄 Welcome to the Stream Auto Test Platform ~
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              :loading="loginLoading"
              @click="onLogin"
              >登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";

export default {
  name: "LoginIndex",
  components: {},
  props: {},
  data() {
    return {
      user: {
        username: "", // 用户名
        password: "" // 密码
      },
      loginLoading: false,
      // 表单校验规则
      formRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onLogin() {
      // 校验提交表单
      this.$refs["loginForm"].validate(valid => {
        // 如果表单验证失败，停止请求提交
        if (!valid) {
          return;
        }

        this.doLogin();
      });
    },

    doLogin() {
      // 开启登陆中 loading...
      this.loginLoading = true;

      login(this.user)
        .then(res => {
          if (res.data.code === 200) {
            // 200为正确相应
            window.localStorage.clear();
            window.localStorage.setItem("userId", res.data.result.id);
            window.localStorage.setItem("token", res.data.result.token);
            window.localStorage.setItem("is_admin", res.data.result.is_admin);
            window.localStorage.setItem("user", res.data.result.username);
            window.localStorage.setItem("nickname", res.data.result.nickname);

            this.$message({
              message: "登录成功",
              type: "success"
            });
            // 登录成功，跳转到工作台
            this.$router.push("/work/");
            // 否则提示错误
          } else {
            this.$message.error("用户名或密码错误");
          }

          // 关闭 loading
          this.loginLoading = false;
        })
        .catch(err => {
          // 登录失败
          console.log("登录错误，请检查" + err);
          this.$message.error("登录错误，请检查");

          // 关闭 loading
          this.loginLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="less">
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../../assets/bgImg.png") no-repeat;
  background-size: cover;

  .login-form-wrap {
    border-radius: 25px;
    margin-bottom: 320px;
    min-width: 340px;
    padding: 30px 50px 10px;
    background-color: #fff;

    .login-head {
      display: flex;
      justify-content: center;
      align-items: center;

      .logo-img {
        display: flex;
        width: 200px;
        height: 88px;
        background: url("../../assets/logo3.png") no-repeat;
        background-size: contain;
        justify-content: center;
        align-items: center;
      }
    }

    .login-desc {
        display: flex;
        font-size: 12px;
        font-weight: 200px;
        color: #477EFF;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
      }

    .login-form {
      .promot {
        color: rgba(0, 110, 255, 0.918);
      }

      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
